<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <link rel="shortcut icon" href="assets/images/Shop.ico">
    <link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">

</head>
<style>
    .attrBtn.checked{
        border: 2px firebrick ridge;
    }
</style>
<body>

<div th:replace="header::headerS"></div>

<!-- Single Product Section Start -->
<div class="section section-margin-top">
    <div class="container">

        <div class="row">
            <div class="col-lg-5 offset-lg-0 col-md-8 offset-md-2">

                <!-- Product Details Image Start -->
                <div class="product-details-img">

                    <!-- Single Product Image Start -->
                    <div class="single-product-img swiper-container product-gallery-top">
                        <div class="swiper-wrapper popup-gallery">
                            <a class="swiper-slide w-100" href="#">
                                <img class="w-100" th:src="${product.pic}" alt="Product">
                            </a>
                        </div>
                    </div>
                    <!-- Single Product Image End -->


                </div>
                <!-- Product Details Image End -->

            </div>
            <div class="col-lg-7">

                <!-- Product Summery Start -->
                <div class="product-summery position-relative">

                    <!-- Product Head Start -->
                    <div class="product-head mb-3">
                        <h2 th:text="${product.name}" class="product-title"></h2>
                    </div>
                    <!-- Product Head End -->

                    <!-- Rating Start -->
                    <span class="ratings justify-content-start mb-2">
                            <span class="rating-wrap">
                                <span class="star" style="width: 100%"></span>
                            </span>
                            <span class="rating-num">(5)</span>
                            </span>
                    <!-- Rating End -->

                    <!-- Price Box Start -->
                    <div class="price-box mb-2">
                        <span th:text="'¥'+${product.price}" class="regular-price">¥</span>
                    </div>
                    <!-- Price Box End -->

                    <!-- SKU Start -->
                    <div class="sku mb-3">
                        <span th:text="'SKU:'+${product.productSn}"></span>
                    </div>
                    <!-- SKU End -->

                    <!-- Description Start -->
                    <p th:text="${product.subTitle}" class="desc-content mb-5"></p>
                    <!-- Description End -->
                    <div style="display: inline-block" class="desc-content mb-5" th:each="pmsProductAttributeValue : ${pmsProductAttributeValues}">
                        <button style="border-radius: 5px"  class="attrBtn btn-primary" th:text="${pmsProductAttributeValue.value}+' '" onclick="change(this)"></button>
                    </div>
                    <!-- Quantity Start -->
                    <div class="quantity d-flex align-items-center mb-5">
                        <span class="me-2"><strong>数量: </strong></span>
                        <div class="cart-plus-minus">
                            <input id="value" class="cart-plus-minus-box" value="1" type="text">
                            <div class="dec qtybutton" onclick="des()">-
                            </div>
                            <div class="inc qtybutton" onclick="valueAdd()">+</div>
                        </div>
                    </div>
                    <!-- Quantity End -->

                    <!-- Cart Button Start -->
                    <div class="cart-btn mb-8">
                        <a class="btn btn-primary btn-hover-primary" href="#">加入购物车</a>
                        <a class="btn btn-primary btn-hover-primary" href="#">购买</a>
                    </div>
                    <!-- Cart Button End -->

                    <!-- Action Button Start -->
                    <div class="actions border-bottom mb-4 pb-4">
                        <a href="index" title="Compare" class="action compare"><i class="pe-7s-refresh-2"></i>其他商品</a>
                        <a href="#" title="Wishlist" class="action wishlist"><i class="pe-7s-like"></i>收藏</a>
                    </div>
                     Action Button End
                    <div th:each="comment : ${comments}">
                        <p class="desc-content mb-5" th:text="${comment.memberNickName}+'的评论：'"></p>
                        <p class="desc-content mb-5" th:text="${comment.content}"></p>
                    </div>
                </div>
                <!-- Product Summery End -->

            </div>
        </div>

        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
    </div>
</div>
<script src="../static/assets/js/jquery-3.6.1.js"></script>
<script>
    function des() {
        let value = document.getElementById('value').value;
        if(value>1){
            document.getElementById('value').value-=1;
        }
    }
    function valueAdd() {
        let value = document.getElementById('value').value;
            document.getElementById('value').value=parseInt(value)+1;
    }
    function change(obj) {
        $(obj).toggleClass("checked");
    }
</script>

<script src="assets/js/vendor.min.js"></script>
<script src="assets/js/plugins.min.js"></script>

<!--Main JS-->
<script src="assets/js/main.js"></script>
</body>

</html>